<template>
    <div>
        <div>
            <el-header style="height: 50px; margin: auto">
                <span style="color: white; font-size: 30px; float:left; ">湖北物业管理系统</span>
                <span style="color: white; font-size: 20px;">欢迎：{{ruleForm.username}}</span>
                <el-button style="margin-left: 40px;color: white;font-size: 20px;background-color: cornflowerblue;"
                           class="el-icon-edit"
                           @click="dialogVisible = true">修改密码
                </el-button>
                <router-link to="/" style="margin-left: 10px;color: white;">安全退出</router-link>
                <span style="color: white; font-size: 20px; float: right;margin-top: 10px">今天是：{{ nowDate }}</span>
            </el-header>
        </div>
        <el-container>
            <el-aside width="210px">
                <el-row class="tac">
                    <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                    >
                        <!--<el-submenu style="background-color: paleturquoise">
                            <template slot="title">
                                <Icon type="logo-yen" style="color: darkgoldenrod;margin-right: 10px" />财务管理
                            </template>-->
                        <el-menu-item-group >
                            <div v-for="item in Tabs" :key="item.name">
                                <el-submenu
                                        v-if="item.childs && item.childs.length"
                                        :key="item.name"
                                        :index="item.name"
                                >
                                    <template slot="title">
                                        <i class="el-icon-goods" ></i>
                                        <span>{{item.title}}</span>
                                    </template>
                                    <el-menu-item
                                            @click="goTo(icon)"
                                            v-for="icon in item.childs"
                                            :key="icon.name"
                                    ><i class="el-icon-office-building" ></i>
                                        <span>{{icon.title}}</span>
                                    </el-menu-item>
                                </el-submenu>
                            </div>


                        </el-menu-item-group>

                        <!--</el-submenu>-->
                    </el-menu>
                </el-row>

            </el-aside>

            <el-dialog
                    title="修改密码"
                    :visible.sync="dialogVisible"
                    width="20%"
                    @close='cancel'
            >
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="原始密码" prop="contractnum">
                        <el-input v-model="ruleForm.pass" :rules="[{required:true,message:'请输入原始密码'}]" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="content">
                        <el-input v-model="ruleForm.password" style="width: 200px"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="cancel()" size="medium">取 消</el-button>
                <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
            </el-dialog>
            <!-- 下拉选择框 -->

            <el-main>
                <el-tabs
                        class="tabs"
                        v-model="editableTabsValue"
                        type="card"
                        @tab-remove="removeTab"
                        @tab-click="changetab"
                >
                    <el-tab-pane
                            v-for="(item) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                            :closable="item.close"
                    ></el-tab-pane>
                </el-tabs>
                <router-view/>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        props:['name'],
        name: "main",
        data() {
            return {
                ruleForm: {
                    id:sessionStorage.getItem("id"),
                    pass: '',
                    password: '',
                    p1:sessionStorage.getItem("password"),
                    username:sessionStorage.getItem("username")
                },
                dialogVisible: false,
                nowDate: "", // 当前日期
                isrefresh: true,
                editableTabsValue: '1',
                editableTabs: [
                    {
                        title: 'Hello',
                        name: '2',
                        path: '/Hello',
                        close: null,
                        class: 'icon iconfont icon-doc_c'
                    }
                ],
                tabIndex: 0,
                isCollapse: false,
                active: '2',
                targetclickname: '',
                Tabs: [
                    {
                        title: '财务管理',
                        name: '1',
                        close: true,
                        class: 'icon iconfont icon-gauge',
                        childs: [
                            {
                                title: '合同应付款收缴录入',
                                name: '1-1',
                                path: '/vue1',
                                close: true
                            },
                            {
                                title: '装修保证金管理',
                                name: '1-2',
                                path: '/vue2',
                                close: true
                            },{
                                title: '其他费用收缴录入',
                                name: '1-3',
                                path: '/vue3',
                                close: true
                            },{
                                title: '写字楼电费',
                                name: '1-4',
                                path: '/vue4',
                                close: true
                            },{
                                title: '物业费统计',
                                name: '1-5',
                                path: '/vue5',
                                close: true
                            },{
                                title: '水费统计',
                                name: '1-6',
                                path: '/vue6',
                                close: true
                            },{
                                title: '电费统计',
                                name: '1-7',
                                path: '/vue7',
                                close: true
                            },{
                                title: '费用数据统计',
                                name: '1-8',
                                path: '/vue8',
                                close: true
                            },{
                                title: '财务分析',
                                name: '1-9',
                                path: '/vue9',
                                close: true
                            }
                        ]
                    },
                    {
                        title: '客服管理',
                        name: '2',
                        close: true,
                        class: 'icon iconfont icon-gauge',
                        childs: [
                            {
                                title: '商铺装修费用管理',
                                name: '2-1',
                                path: '/vue11',
                                close: true
                            },
                            {
                                title: '写字楼装修费用管理',
                                name: '2-2',
                                path: '/vue12',
                                close: true
                            },{
                                title: '住宅装修费用管理',
                                name: '2-3',
                                path: '/vue13',
                                close: true
                            },{
                                title: '写字楼电费管理',
                                name: '2-4',
                                path: '/vue14',
                                close: true
                            },{
                                title: '银行影院水电费管理',
                                name: '2-5',
                                path: '/vue15',
                                close: true
                            },{
                                title: '住宅水费管理',
                                name: '2-6',
                                path: '/vue16',
                                close: true
                            },{
                                title: '其他费用录入',
                                name: '2-7',
                                path: '/vue17',
                                close: true
                            },{
                                title: '商铺费用催缴',
                                name: '2-8',
                                path: '/vue18',
                                close: true
                            },{
                                title: '写字楼费用催缴',
                                name: '2-9',
                                path: '/vue19',
                                close: true
                            }
                        ]
                    },
                    {
                        title: '基础资料',
                        name: '3',
                        close: true,
                        class: 'icon iconfont icon-gauge',
                        childs: [
                            {
                                title: '计价方式',
                                name: '3-1',
                                path: '/jjfs',
                                close: true
                            },
                            {
                                title: '楼栋信息',
                                name: '3-2',
                                path: '/ldxx',
                                close: true
                            },{
                                title: '楼层信息',
                                name: '3-3',
                                path: '/lcxx',
                                close: true
                            },{
                                title: '房屋信息',
                                name: '3-4',
                                path: '/fwxx',
                                close: true
                            },{
                                title: '业主信息',
                                name: '3-5',
                                path: '/yzxx',
                                close: true
                            },{
                                title: '租户信息',
                                name: '3-6',
                                path: '/zhxx',
                                close: true
                            },{
                                title: '写字楼管理',
                                name: '3-7',
                                path: '/xzlgl',
                                close: true
                            },{
                                title: '住宅管理',
                                name: '3-8',
                                path: '/zzgl',
                                close: true
                            },{
                                title: '商铺管理',
                                name: '3-9',
                                path: '/spgl',
                                close: true
                            }
                        ]
                    },
                    {
                        title: '首页',
                        name: '2',
                        path: '/Hello',
                        close: true,
                        class: 'icon iconfont icon-doc_c'
                    },
                ],
                activeIndex: '2'
            };
        },
        methods: {
            cancel() {
                this.ruleForm.pass='',
                    this.ruleForm.password='',
                    this.dialogVisible = false;
            },
            async updateUser () {

                this.ruleForm.p1 = sessionStorage.getItem('password');
                if (this.ruleForm.pass !== this.ruleForm.p1) {
                    alert("原始密码错误！！！")
                }else{
                    this.ruleForm.id = sessionStorage.getItem('id');
                    this.$axios.post('http://localhost:8081/update',{
                        id:sessionStorage.getItem('id'),
                        password:this.ruleForm.password
                    })
                        .then(response => {
                            if (response.data.flag === 1) {
                                this.$router.replace({path: '/'})
                            } else {
                                alert("修改失败!!!");
                            }
                        })
                }
            },
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                let week = date.getDay(); // 星期
                let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
                let hour = date.getHours(); // 时
                hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
                let minute = date.getMinutes(); // 分
                minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
                let second = date.getSeconds(); // 秒
                second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
                this.nowDate = `${year}年/${month}月/${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`;
            },
            handleOpen (key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose (key, keyPath) {
                console.log(key, keyPath)
            },
            // 去往不同的路由
            goTo (item) {
                this.addTab(item)
                this.editableTabsValue = item.name
                this.$router.push(item.path)
            },
            // 添加tab
            addTab (item) {
                this.targetclickname = item.name
                // 如果已经打开了，则不添加
                for (let i = 0; i < this.editableTabs.length; i++) {
                    // eslint-disable-next-line eqeqeq
                    if (item.name == this.editableTabs[i].name) {
                        return
                    }
                }
                let newTabName = item.name
                this.editableTabs.push({
                    title: item.title,
                    name: item.name,
                    path: item.path,
                    close: true
                })
                this.editableTabsValue = newTabName
            },
            // 关闭tab
            removeTab (targetName) {
                let tabs = this.editableTabs
                let activeName = this.editableTabsValue
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1]
                            if (nextTab) {
                                activeName = nextTab.name
                                this.$router.push(nextTab.path)
                            }
                        }
                    })
                }
                this.targetclickname = activeName
                this.active = activeName
                this.editableTabsValue = activeName
                this.editableTabs = tabs.filter(tab => tab.name !== targetName)
            },
            // 点击tab,切换导航颜色
            changetab (targetName) {
                this.targetclickname = targetName.name
                let tabs = this.editableTabs
                let activeName = targetName.name
                tabs.forEach((tab) => {
                    if (tab.name === targetName.name) {
                        this.$router.push(tab.path)
                    }
                })
                this.editableTabsValue = activeName
                this.active = activeName
            }

        },
        gotoRegister(){
            this.$router.push('/');
        },
        mounted() {
            this.currentTime();
        },
        // 销毁定时器
        beforeDestroy() {
            if (this.formatDate) {
                clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
            }
        }
    }

</script>

<style scoped>
    .el-header {
        background-color: cornflowerblue;
    }
    a {
        text-decoration: none;
    }

    .router-link-active {
        text-decoration: none;
    }
    .el-menu-item {
        background-color: rgba(0, 0, 0, 0.1);
    }
    .el-menu-item.is-active {
        background-color: #247bb4 !important;
    }
</style>